<template>
  <van-nav-bar title="退货商品" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <section class="aui-flexView">
      <!-- 订单详细 -->
      <section class="aui-scrollView">
        <!-- 订单状态 -->
        <div class="aui-pay-change">
          <div class="aui-flex">
            <div class="aui-flex-box">
              <h3>{{ detail.status_text }}</h3>
            </div>
            <div class="aui-pay-zfb">
              <img src="/assets/images/icon-zfb.png" alt="" />
            </div>
          </div>
        </div>

        <!-- 退货地址 -->
        <div class="aui-flex">
          <div style="font-size: 16px">退货地址：</div>
          <div class="aui-flex-box">
            <h3>
              {{ detail.store.aftercare }} <em> {{ detail.store.phone }}</em>
            </h3>
            <p>{{ detail.store.address }}</p>
          </div>
        </div>

        <!-- 退货信息 -->
        <van-form @submit="onSubmit">
          <!-- 寄件地址列表 -->
          <van-field
            v-model="address"
            is-link
            readonly
            name="region"
            label="寄件地址列表"
            placeholder="点击选择地址"
            @click="showAddressPicker = true"
            :rules="[{ required: true, message: '请选择寄件地址列表' }]"
          />
          <van-popup v-model:show="showAddressPicker" position="bottom">
            <van-picker
              :columns="addresslist"
              @confirm="onAddressConfirm"
              @cancel="showAddressPicker = false"
            />
          </van-popup>

          <!-- 物流信息 -->
          <van-field
            v-model="express"
            is-link
            readonly
            name="express"
            label="物流公司"
            placeholder="点击选择物流公司"
            @click="showExpressPicker = true"
            :rules="[{ required: true, message: '请填写物流公司' }]"
          />
          <van-popup v-model:show="showExpressPicker" position="bottom">
            <van-picker
              :columns="columnsExpress"
              @confirm="onExpressConfirm"
              @cancel="showExpressPicker = false"
            />
          </van-popup>

          <!-- 快递单号 -->
          <van-field
            v-model="expresscode"
            name="expresscode"
            label="快递单号"
            placeholder="请输入快递单号"
            :rules="[{ required: true, message: '请填写快递单号' }]"
          />

          <div style="margin: 16px">
            <van-button round block type="success" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </section>
    </section>
  </section>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/order/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const orderid = ref(proxy.$route.query.orderid ?? 0)
const detail = ref({
  store: {}
})
// 选择寄件地址
const showAddressPicker = ref(false)
const addresslist = ref([])
// 选择物流公司
const showExpressPicker = ref(false)
const columnsExpress = ref([])
// 物流单号
const expresscode = ref('')
// 绑定寄件地址
const addressid = ref('')
const address = ref('')
// 绑定物流信息
const expressid = ref('')
const express = ref('')

onBeforeMount(() => {
  getOrderInfoData()
})
const getOrderInfoData = async () => {
  let result = await Api.OrderInfo({ busid: LoginUser.id, orderid: orderid.value })
  if (result.code == 1) {
    detail.value = result.data;
  }
  // 物流公司列表
  let res1 = await Api.expresslist()
  if (res1.code == 1) {
    columnsExpress.value = res1.data;
  }
  // 寄件地址表
  let res2 = await Api.addresslist({ busid: LoginUser.id })
  if (res2.code == 1) {
    addresslist.value = res2.data;
  }
}

// 选中寄件地址
const onAddressConfirm = ({ selectedOptions }) => {
  address.value = selectedOptions[0]?.text;
  addressid.value = selectedOptions[0]?.value;
  showAddressPicker.value = false;
}
// 选中物流地址
const onExpressConfirm = ({ selectedOptions }) => {
  express.value = selectedOptions[0]?.text;
  expressid.value = selectedOptions[0]?.value;
  showExpressPicker.value = false;
}


const onSubmit = async () => {
  let result = await Api.OrderRefundgoods({
    busid: LoginUser.id,
    orderid: orderid.value,
    addressid: addressid.value,
    expressid: expressid.value,
    expresscode: expresscode.value
  })

  if (result.code == 1) {
    showSuccessToast({
      message: result.msg,
      onClose: function () {
        goBack()
      }
    });
  } else {
    showFailToast(result.msg);
  }
};

</script>

<style>
@import url('/assets/css/info.css');
</style>